<template>
    <div class="person">
        <h2>Current Temp: {{ temp }} 度🌡️</h2>
        <h2>Current Height: {{ height }} 厘米</h2>
        <button @click="changeTemp">click on me temp add 10</button>
        <button @click="changeHeight">click on me height add 10</button>
    </div>
</template>

<script setup name="Person">
    import { ref, watch, watchEffect } from 'vue'

    let temp = ref(10)
    let height = ref(0)

    function changeTemp() {
        temp.value += 10
    }
    function changeHeight() {
        height.value += 10
    }

    // watch([temp, height], (value) => {
    //     console.log(value)
    //     let [newTemp, newHeight] = value
    //     console.log(newTemp, newHeight)
    //     if (newTemp >= 60 || newHeight >= 80) {
    //         console.log('request')
    //     }
    // })

    watchEffect(() => {
        if (temp.value >= 60 || height.value >= 80) {
            console.log('request')
        }
    })
</script>

<style>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
    li {
        font-size: 20px;
    }
</style>